<template>
  <component
    :is="url ? 'router-link' : 'span'"
    class="ui-menu-item"
    :class="{'is-active': active}"
    :to="url"
    @click="handleClick"
  >
    <span class="ui-menu-item__main">
      <slot></slot>
    </span>
    <span class="ui-menu-item__append" v-if="$slots.append">
      <slot name="append"></slot>
    </span>
  </component>
</template>
<script>
import UiArrow from '../arrow'

export default {
  name: 'UiMenuItem',
  inject: ['UiMenu'],
  components: {
    UiArrow
  },
  props: {
    url: {
      type: String
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt)
    }
  }
}
</script>
<style lang="less">
.ui-menu-item{
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  margin-bottom: 4px;
  margin: 0 9px 6px;
  padding: 2px 9px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: inherit;
  cursor: pointer;
  &.router-link-active,
  &.is-active {
    color: #3385FF;
    background-color: #f8f8f9;
  }
}
.ui-menu-item__main{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-menu-item__append{
  margin-left: 12px;
}
</style>
